<template>
<div class="form-single-fragment" style="position: relative;">
  <header-handle headerContent="活动管理" :buttons="handleButtons" @goBack="goBack()"></header-handle>
  <el-divider class="mt0 mb12"></el-divider>
  <el-tag class="mb12">当前阵地：{{currentGroundData.groundName}}</el-tag>
  <el-form ref="activityFilter" :model="activity" :size="defaultFormItemSize" label-width="80px" label-position="right" @submit.native.prevent>
    <filter-box :item-width="350">
      <el-form-item label="活动名称" prop="formFilter.keywords">
        <el-input v-model="activity.formFilter.keywords" placeholder="请输入活动名称"></el-input>
      </el-form-item>
      <el-form-item label="活动状态" prop="formFilter.status">
        <el-select v-model="activity.formFilter.status" :clearable="true" placeholder="发布状态" class="filter-item">
          <el-option key="-1" value="-1" label="全部"></el-option>
          <el-option v-for="item in statusList" :key="item.id" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button slot="operator" type="default" :size="defaultFormItemSize" @click="onResetActivity">重置</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="refreshActivity(true)">查询</el-button>
      <el-button slot="operator" type="primary" :size="defaultFormItemSize" @click="onActivityCreate()">新增</el-button>
    </filter-box>
  </el-form>
  <el-table border ref="activity" :data="activity.Activity.impl.dataList" :size="defaultFormItemSize" @sort-change="activity.Activity.impl.onSortChange" header-cell-class-name="table-header-gray" highlight-current-row
    @current-change="activity.Activity.impl.currentRowChange" style="margin-top:10px">
    <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" :index="activity.Activity.impl.getTableIndex" />
    <el-table-column label="活动名称" prop="activityName" min-width="150" show-overflow-tooltip></el-table-column>
    <el-table-column label="服务类型" prop="serveCategoryStr" min-width="150" show-overflow-tooltip></el-table-column>
    <el-table-column label="服务对象" prop="serveTargetStr" min-width="150" show-overflow-tooltip></el-table-column>
    <el-table-column label="负责人" prop="director" show-overflow-tooltip></el-table-column>
    <el-table-column label="联系方式" prop="directorPublic" show-overflow-tooltip></el-table-column>
    <el-table-column label="活动起止时间" prop="statrDate" min-width="150" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{scope.row.startDate}}-{{scope.row.endDate}}</span>
      </template>
    </el-table-column>
    <el-table-column label="活动地点" prop="address" min-width="150" show-overflow-tooltip></el-table-column>
    <el-table-column label="操作" fixed="right" width="130">
      <template slot-scope="scope">
        <el-button @click.stop="onEdit(scope.row)" type="text" :size="defaultFormItemSize">编辑</el-button>
        <el-button @click.stop="onDelete(scope.row)" type="text" :size="defaultFormItemSize">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer :visible.sync="drawerVisiable" size="60%" :destroy-on-close="true" :wrapperClosable="false">
    <span slot="title" class="drawerTitle">{{drawerTitle}}</span>
    <ActivityForm :initData="initActivityData" ref="activityRef" :formStatus="formStatus" :initForm="editFormData" v-if="drawerVisiable" class="drawHeight"></ActivityForm>
    <div class="text-right pr20">
      <el-button @click="drawerVisiable = false" :size="defaultFormItemSize">取 消</el-button>
      <el-button type="primary" @click="submitForm" :size="defaultFormItemSize">确 定</el-button>
    </div>
  </el-drawer>
</div>
</template>
<script>
import {
  TableWidget,
} from '@/utils/widget.js';
import ActivityForm from '@/views/volunActivies/form/index.vue'
import {
  ActivityController,
  DictionaryController,
  ProjectController,
} from '@/api';
import qs from 'qs'
export default {
  name: 'activity',
  props: ['currentGroundData'],
  components: {
    ActivityForm
  },
  data() {
    return {
      activity: {
        formFilter: {
          keywords: undefined,
          status: "-1",
        },
        Activity: {
          impl: new TableWidget(this.loadData, true, true, true, 'createTime', 0)
        },
        isInit: false,
      },
      jumpParams: {
        status: {
          dropdownList: [],
        },
      },
      handleButtons: [{
          status: 1,
          label: '取消',
          method: () => {
            this.goBack();
          },
        },
        {
          type: 'primary',
          status: 1,
          label: '确定',
          method: () => {
            this.onConfirm(true);
          },
        }
      ],
      drawerVisiable: false,
      drawerTitle: "",
      statusList: [],
      formStatus: "",
      editFormData: {},
      initActivityData: {
        serveCategory: {
          dropdownList: []
        },
        projectId: {
          dropdownList: []
        },
        serveTarget: {
          dropdownList: []
        },
        area: {
          areaOptions: JSON.parse(sessionStorage.getItem("areaOptions4"))
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    onConfirm(isSuccess) {
      this.$emit('goBack')
    },
    refreshActivity(reloadData = false) {
      if (reloadData) {
        this.activity.Activity.impl.refreshTable(true, 1);
      } else {
        this.activity.Activity.impl.refreshTable();
      }
      if (!this.activity.isInit) {
        // 初始化下拉数据
      }
      this.activity.isInit = true;
    },
    onResetActivity() {
      this.$refs.activityFilter.resetFields();
      this.refreshActivity(true);
    },
    onActivityCreate() {
      this.formStatus = "add";
      this.editFormData = {};
      this.drawerTitle = "新增活动";
      this.drawerVisiable = true;
    },
    loadData(params) {
      if (params == null) params = {};
      params = {
        ...params
      }
      params.dto = this.activity.formFilter;
      params.dto.groundId = this.currentGroundData.groundId
      return new Promise((resolve, reject) => {
        ActivityController.list(this, params).then(res => {
          resolve({
            dataList: res.data.dataList,
            totalCount: Number(res.data.totalCount)
          });
        }).catch(e => {
          reject(e);
        });
      });
    },
    getDicData(code, callBack) {
      let params = {};
      params.dictCode = code;
      DictionaryController.dictGlobalDict(this, params).then(res => {
        callBack(res.getList())
      })
    },
    init() {
      this.getDicData('ServerCategory', (data) => {
        this.initActivityData.serveCategory.dropdownList = data
      })
      this.getDicData('ServerTarget', (data) => {
        this.initActivityData.serveTarget.dropdownList = data
      })
      this.getDicData('ActivityStatus', (data) => {
        this.statusList = data
      })
      this.loadProjectDropdownList()
    },
    loadProjectDropdownList() {
      return new Promise((resolve, reject) => {
        let params = {};
        params.condition = {};
        ProjectController.list(this, params).then(res => {
          this.initActivityData.projectId.dropdownList = res.data.dataList
        }).catch(e => {
          reject(e);
        });
      });
    },
    onEdit(row) {
      let me = this;
      me.formStatus = "edit";
      me.drawerTitle = "编辑活动";
      ActivityController.info(me, qs.stringify({
        id: row.activityId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        },
      }).then(res => {
        me.editFormData = res.data;
        me.drawerVisiable = true;
      })
    },
    onDelete(row) {
      let params = {};
      params.id = row.id;
      this.$confirm('是否删除此活动？').then(res => {
        ActivityController.delete(this, params).then(res => {
          this.$message.success('删除成功');
          this.activity.Activity.impl.refreshTable();
        }).catch(e => {});
      }).catch(e => {});
    },
    submitForm() {
      let me = this;
      let length = Object.values(me.$refs.activityRef.getFormData()).length;
      if (length > 0) {
        let data = JSON.parse(JSON.stringify(this.$refs.activityRef.getFormData()))
        data.groundId = me.currentGroundData.groundId;
        data.startDate = data.date[0]
        data.endDate = data.date[1]
        me.$delete(data, "date")
        if (data.area?.length > 0) {
          let arr = data.area;
          data.province = arr[0];
          data.city = arr[1];
          data.district = arr[2];
          data.street = arr[3]
        }
        me.$delete(data, "area")
        ActivityController.add(this, data).then(res => {
          me.$message.success("保存成功")
          me.drawerVisiable = false;
          me.activity.Activity.impl.refreshTable();
        })
      }
    },
  },
  computed: {},
  mounted() {
    this.refreshActivity()
  },
  created() {
    this.init()
  },
  watch: {}
}
</script>

<style typpe="less" scoped>
.drawHeight{
  height: calc(100vh - 130px);
  overflow-y: scroll
}
</style>
